<template>
  <el-dialog v-model="modelValue" title="新增" width="60%" @close="close">
    <el-form ref="form" :model="formData" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="来源部门">
            <el-select v-model="formData.department">
              <el-option
                v-for="item in departments"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="客户名称">
            <el-input v-model="formData.name"></el-input> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="品牌所属行业">
            <el-select v-model="formData.industry">
              <el-option
                v-for="item in industries"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="需求等级">
            <el-radio-group v-model="formData.level">
              <el-radio label="A">A</el-radio>
              <el-radio label="B">B</el-radio>
              <el-radio label="C">C</el-radio>
            </el-radio-group>
          </el-form-item></el-col
        >
        <el-col :span="12">
          <el-form-item label="发布平台">
            <el-select v-model="formData.platform">
              <el-option
                v-for="item in platforms"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="预算">
            <el-input v-model="formData.budget"></el-input> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="需求数量">
            <el-input-number
              v-model="formData.number"
              :min="1"
              :max="100"
            /> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="是否合作信息流">
            <el-switch
              v-model="formData.cooperation"
              inline-prompt
              active-text="是"
              inactive-text="否"
            >
            </el-switch> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="销售">
            <el-input v-model="formData.sell"></el-input> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="媒介">
            <el-input v-model="formData.medium"></el-input> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="需求申请时间">
            <el-date-picker v-model="formData.applicationTime" type="date">
            </el-date-picker> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="期望反馈时间">
            <el-date-picker v-model="formData.feedbackTime" type="date">
            </el-date-picker> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="目前进度">
            <el-select v-model="formData.progress">
              <el-option
                v-for="item in states"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="是否成单">
            <el-switch
              v-model="formData.success"
              inline-prompt
              active-text="是"
              inactive-text="否"
            >
            </el-switch> </el-form-item
        ></el-col>
        <el-col :span="12" v-if="formData.success">
          <el-form-item label="成单金额">
            <el-input-number
              v-model="formData.number"
              :min="1"
              :max="100"
            /> </el-form-item
        ></el-col>
        <el-col :span="12" v-else>
          <el-form-item label="未成单原因">
            <el-input v-model="formData.sell"></el-input> </el-form-item
        ></el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="close">确定</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const props = defineProps<{
  modelValue: boolean;
  initValue?: Requirement;
}>();
const emit = defineEmits(["update:modelValue"]);
const form = ref();
const formData = ref({
  department: "",
  name: "",
  industry: "",
  level: "",
  platform: "",
  budget: "",
  number: null,
  cooperation: false,
  sell: "",
  medium: "",
  applicationTime: "",
  feedbackTime: "",
  progress: "",
  success: false,
  price: null,
  reason: "",
});
const departments = [
  { value: "巨量事业部", label: "巨量事业部" },
  { value: "大客户管理部", label: "大客户管理部" },
  { value: "洛丹伦武汉分部", label: "洛丹伦武汉分部" },
];
const industries = [
  { value: "母婴用品", label: "母婴用品" },
  { value: "日化个护", label: "日化个护" },
  { value: "两性、成人", label: "两性、成人" },
];
const platforms = [
  { value: "微博", label: "微博" },
  { value: "抖音", label: "抖音" },
  { value: "小红书", label: "小红书" },
];
const states = [
  { value: "未反馈", label: "未反馈" },
  { value: "已反馈", label: "已反馈" },
  { value: "反馈成功", label: "反馈成功" },
];
const close = () => {
  emit("update:modelValue", false);
};
</script>
